<!DOCTYPE html>
<html><head>
    <title>JQuery Zoom Hover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="JQuery%20Zoom%20Hover_files/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var cont_left = $("#container").position().left;
        $("a img").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
               height: "250",
               width: "250",
               left: "-=50",
               top: "-=50"
            }, "fast");
        }, function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "150",
                width: "150",
                left: "+=50",
               top: "+=50"
            }, "fast");
        });
        
        $(".img").each(function(index) {
            var left = (index * 160) + cont_left;
            $(this).css("left", left + "px");
        });
    });
    </script>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, "Free Sans";
        }
        #main {
            background: #0099cc;
            margin-top: 0;
            padding: 2px 0 4px 0;
            text-align: center;
        }
        #main a {
            color: #ffffff;
            text-decoration: none;
            font-size: 12px;
            font-weight: bold;
            font-family: Arial;
        }
        #main a:hover {
            text-decoration: underline;
        }
        #container {
            text-align: center;
            position: absolute;
            left: 260px;
            margin-top: 150px;
            width: 790px;
        }
        .img {
            position: fixed;
            z-index: 0;
        }
        .end {
            margin-right: 0;
        }
        .clear {
            clear: both;
        }
        .img a img {
            position: relative;
            border: 0 solid #fff;
        }
    </style>
</head>
<body>
    <div id="main">
        <a href="http://superdit.com/">Superdit.com</a>
        &nbsp;&nbsp;&nbsp;
        <a href="http://superdit.com/2011/06/11/hover-image-zoom-with-jquery/">Back To Post (JQuery Hover Image Zoom)</a>
        &nbsp;&nbsp;&nbsp;
        <a href="">Download Source</a>
    </div>
    <div id="container">
        <div style="left: 260px; z-index: 0;" class="img"><a href="#"><img style="display: inline-block; height: 150px; width: 150px; left: 0px; top: 0px;" src="JQuery%20Zoom%20Hover_files/1.jpg"></a></div>
        <div style="left: 420px; z-index: 0;" class="img"><a href="#"><img style="display: inline-block; height: 150px; width: 150px; left: 0px; top: 0px;" src="JQuery%20Zoom%20Hover_files/2.jpg"></a></div>
        <div style="left: 580px; z-index: 0;" class="img"><a href="#"><img style="display: inline-block; height: 150px; width: 150px; left: 0px; top: 0px;" src="JQuery%20Zoom%20Hover_files/3.jpg"></a></div>
        <div style="left: 740px; z-index: 0;" class="img"><a href="#"><img style="display: inline-block; height: 150px; width: 150px; left: 0px; top: 0px;" src="JQuery%20Zoom%20Hover_files/4.jpg"></a></div>
        <div style="left: 900px; z-index: 0;" class="img end"><a href="#"><img style="display: inline-block; height: 250px; width: 250px; left: -50px; top: -50px; overflow: hidden;" src="JQuery%20Zoom%20Hover_files/5.jpg"></a></div>
        <div class="clear"></div>
    </div>


</body></html>